<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="">
<meta name="author" content="">

<title>KoolTube</title>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="/page/css/bootstrap.min.css"
	type="text/css">

<!-- Custom CSS -->
<link rel="stylesheet" href="/page/css/style.css">

<!-- Owl Carousel Assets -->
<link href="/page/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="/page/owl-carousel/owl.theme.css" rel="stylesheet">

<!-- Custom Fonts -->
<link rel="stylesheet"
	href="/page/font-awesome-4.4.0/css/font-awesome.min.css"
	type="text/css">

<!-- jQuery -->
<script src="/page/js/jquery-2.1.1.js"></script>

<!-- Core JavaScript Files -->
<script src="/page/js/bootstrap.min.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<script type="text/javascript">
	/* $(function() {
		window.location = "videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=1";
	}); */
</script>
<body>
	<header> <!--Top--> <nav id="top">
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-sm-6">
				<strong>Welcome to KOOLTUBE!</strong>
			</div>
			<div class="col-md-6 col-sm-6">
				<ul class="list-inline top-link link">
					<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
					<li><a href="contact.html"><i class="fa fa-comments"></i>
							Contact</a></li>
					<li><a href="#"><i class="fa fa-question-circle"></i> FAQ</a></li>
				</ul>
			</div>
		</div>
	</div>
	</nav> <!--Navigation--> <nav id="menu" class="navbar">
	<div class="container">
		<div class="navbar-header">
			<span id="heading" class="visible-xs">Categories</span>
			<button type="button" class="btn btn-navbar navbar-toggle"
				data-toggle="collapse" data-target=".navbar-ex1-collapse">
				<i class="fa fa-bars"></i>
			</button>
		</div>
		<div class="collapse navbar-collapse navbar-ex1-collapse">
			<ul class="nav navbar-nav">
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=1"><i
						class="fa fa-home"></i>电影</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=2"><i
						class="fa fa-home"></i>电视剧</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=3"><i
						class="fa fa-home"></i>片花</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=4"><i
						class="fa fa-home"></i>综艺</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=5"><i
						class="fa fa-home"></i>网络电影</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=6"><i
						class="fa fa-home"></i>脱口秀</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=7"><i
						class="fa fa-home"></i>动漫</a></li>
				<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=8"><i
						class="fa fa-home"></i>音乐</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown"><i class="fa fa-play-circle-o"></i>其他</a>
					<div class="dropdown-menu">
						<div class="dropdown-inner">
							<ul class="list-unstyled">
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=9">生活</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=10">儿童</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=11">母婴</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=12">教育</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=13">健康</a></li>
							</ul>
							<ul class="list-unstyled">
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=14">搞笑</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=15">时尚</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=16">旅游</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=17">拍客</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=18">娱乐</a></li>
							</ul>
							<ul class="list-unstyled">
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=19">财经</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=20">军事</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=21">科技</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=22">公益</a></li>
								<li><a href="../videoInfoYJ/selectVideoTypeVideoInfo?vTypeId=23">纪录片</a></li>
							</ul>
						</div>
					</div></li>
			</ul>
		</div>
	</div>
	</nav>

	<div class="header-slide">
		<div id="owl-demo" class="owl-carousel">
			<c:forEach items="${videoInfoTypeList}" var="videoInfoType">
				<div class="item">
					<div class="zoom-container">
						<div class="zoom-caption">
							<c:forEach items="${videoTypeList}" var="videoType">
								<c:if
									test="${videoType.voTypeId == videoInfoType.vTypeId}">
									<span>${videoType.voTypeName}</span>
								</c:if>
							</c:forEach>
							<a
								href="../videoInfo/singleInitInfos?videoId=${videoInfoType.videoId}">
								<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
							</a>
							<p>${videoInfoType.videoName}</p>
						</div>
						<img src="${videoInfoType.videoCover}" />
					</div>
				</div>
			</c:forEach>
		</div>
	</div>
	</header>
	<!-- Header -->

	<!-- /////////////////////////////////////////Content 下方显示页面  -->
	<div class="copyrights">
		Collect from <a href="http://www.cssmoban.com/">网页模板</a>
	</div>
	<div id="page-content" class="index-page">

		<div class="container">
			<div class="row">
				<div class="featured">
					<c:forEach items="${videoInfoTypeList}" var="videoInfoType"
						begin="0" end="0" step="1">
						<div class="main-vid">
							<div class="col-md-6">
								<div class="zoom-container">
									<div class="zoom-caption">
										<c:forEach items="${videoTypeList}" var="videoType">
											<c:if
												test="${videoType.voTypeId == videoInfoType.vTypeId}">
												<span>${videoType.voTypeName}</span>
											</c:if>
										</c:forEach>
									    <a
											href="../videoInfo/singleInitInfos?videoId=${videoInfoType.videoId}">
											<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
										</a>
										<p>${videoInfoType.videoName}</p>
									</div>
									<img src="${videoInfoType.videoCover}" />
								</div>
							</div>
						</div>
						<div class="sub-vid">
							<c:forEach items="${videoInfoTypeList}" varStatus="videoInfo"
								var="videoInfoType2" begin="1" end="2" step="1">
								<div class="col-md-3">
									<c:if test="${videoInfo.index eq 1}">
										<c:forEach items="${videoInfoTypeList}" var="videoInfoType1"
											begin="1" end="2" step="1">
											<div class="zoom-container">
												<div class="zoom-caption">
													<c:forEach items="${videoTypeList}" var="videoType">
														<c:if
															test="${videoType.voTypeId == videoInfoType1.vTypeId}">
															<span>${videoType.voTypeName}</span>
														</c:if>
													</c:forEach>
													<a
														href="../videoInfo/singleInitInfos?videoId=${videoInfoType1.videoId}">
														<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
													</a>
													<p>${videoInfoType1.videoName}</p>
												</div>
												<img src="${videoInfoType1.videoCover}" />
											</div>
										</c:forEach>
									</c:if>
									<c:if test="${videoInfo.index eq 2}">
										<c:forEach items="${videoInfoTypeList}" var="videoInfoType1"
											begin="3" end="4" step="1">
											<div class="zoom-container">
												<div class="zoom-caption">
													<c:forEach items="${videoTypeList}" var="videoType">
														<c:if
															test="${videoType.voTypeId == videoInfoType1.vTypeId}">
															<span>${videoType.voTypeName}</span>
														</c:if>
													</c:forEach>
													<a
														href="../videoInfo/singleInitInfos?videoId=${videoInfoType1.videoId}">
														<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
													</a>
													<p>${videoInfoType1.videoName}</p>
												</div>
												<img src="${videoInfoType1.videoCover}" />
											</div>
										</c:forEach>
									</c:if>
								</div>
							</c:forEach>
						</div>
					</c:forEach>
					<div class="clear"></div>
				</div>
			</div>
			<div class="row">
				<div id="main-content" class="col-md-8">
					<div class="box">
						<div class="box-header">
							<h2>
								<i class="fa fa-globe"></i>NEWS大事件
							</h2>
						</div>
						<div class="box-content">
							<div class="row">
								<c:forEach items="${newVideoInfoList}" varStatus="newVideo"
									var="newVideoInfo" begin="0" end="1" step="1">
									<div class="col-md-6">
										<div class="wrap-vid">
											<div class="zoom-container">
												<div class="zoom-caption">
													<c:forEach items="${videoTypeList}" var="videoType">
														<c:if
															test="${videoType.voTypeId == newVideoInfo.vTypeId}">
															<span>${videoType.voTypeName}</span>
														</c:if>
													</c:forEach>
													<a
														href="../videoInfo/singleInitInfos?videoId=${newVideoInfo.videoId}">
														<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
													</a>
													<p>${newVideoInfo.videoName}</p>
												</div>
												<img src="${newVideoInfo.videoCover}" />
											</div>
											<h3 class="vid-name">
												<a
													href="../videoInfo/singleInitInfos?videoId=${newVideoInfo.videoId}">${newVideoInfo.videoName}</a>
											</h3>
											<div class="info">
												<h5>
													<c:forEach items="${videoTypeList}" var="videoType">
														<c:if test="${videoType.voTypeId == newVideoInfo.vTypeId}">
															Type <a
																href="selectVideoTypeVideoInfo?vTypeId=${videoType.voTypeId}">${videoType.voTypeName}</a>
														</c:if>
													</c:forEach>
												</h5>
												<span><i class="fa fa-calendar"></i>${newVideoInfo.createTime}</span>
												<span><i class="fa fa-heart"></i>${newVideoInfo.loveNumber}</span>
											</div>
										</div>
										<p class="more">${newVideoInfo.videoDetails}</p>
										<a href="../page/single.html" class="btn btn-1">Read More</a>
										<div class="line"></div>
										<div class="post wrap-vid">
											<c:if test="${newVideo.index eq 0}">
												<c:forEach items="${newVideoInfoList}" var="newVideoInfo1"
													begin="2" end="4" step="1">
													<div class="zoom-container">
														<div class="zoom-caption">
															<c:forEach items="${videoTypeList}" var="videoType">
																<c:if
																	test="${videoType.voTypeId == newVideoInfo.vTypeId}">
																	<span>${videoType.voTypeName}</span>
																</c:if>
															</c:forEach>
															<a
																href="../videoInfo/singleInitInfos?videoId=${newVideoInfo1.videoId}">
																<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
															</a>
															<p>${newVideoInfo1.videoName}</p>
														</div>
														<img src="${newVideoInfo1.videoCover}" />
													</div>
													<div class="wrapper">
														<h5 class="vid-name">
															<a
																href="../videoInfo/singleInitInfos?videoId=${newVideoInfo1.videoId}">${newVideoInfo1.videoName}</a>
														</h5>
														<div class="info">
															<h6>
																<c:forEach items="${videoTypeList}" var="videoType">
																	<c:if
																		test="${videoType.voTypeId == newVideoInfo.vTypeId}">
															Type <a
																			href="selectVideoTypeVideoInfo?vTypeId=${videoType.voTypeId}">${videoType.voTypeName}</a>
																	</c:if>
																</c:forEach>
															</h6>
															<span><i class="fa fa-calendar"></i>${newVideoInfo1.createTime}</span>
															<span><i class="fa fa-heart"></i>${newVideoInfo1.loveNumber}</span>
														</div>
													</div>
												</c:forEach>
											</c:if>
											<c:if test="${newVideo.index eq 1}">
												<c:forEach items="${newVideoInfoList}" var="newVideoInfo1"
													begin="5" end="7" step="1">
													<div class="zoom-container">
														<div class="zoom-caption">
															<c:forEach items="${videoTypeList}" var="videoType">
																<c:if test="${videoType.voTypeId == newVideoInfo.vTypeId}">
																	<span>${videoType.voTypeName}</span>
																</c:if>
															</c:forEach>
															 <a
																href="../videoInfo/singleInitInfos?videoId=${newVideoInfo1.videoId}">
																<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
															</a>
															<p>${newVideoInfo1.videoName}</p>
														</div>
														<img src="${newVideoInfo1.videoCover}" />
													</div>
													<div class="wrapper">
														<h5 class="vid-name">
															<a
																href="../videoInfo/singleInitInfos?videoId=${newVideoInfo1.videoId}">${newVideoInfo1.videoName}</a>
														</h5>
														<div class="info">
															<h6>
																<c:forEach items="${videoTypeList}" var="videoType">
																	<c:if
																		test="${videoType.voTypeId == newVideoInfo.vTypeId}">
															Type <a
																			href="selectVideoTypeVideoInfo?vTypeId=${videoType.voTypeId}">${videoType.voTypeName}</a>
																	</c:if>
																</c:forEach>
															</h6>
															<span><i class="fa fa-calendar"></i>${newVideoInfo1.createTime}</span>
															<span><i class="fa fa-heart"></i>${newVideoInfo1.loveNumber}</span>
														</div>
													</div>
												</c:forEach>
											</c:if>
										</div>
									</div>
								</c:forEach>
							</div>
						</div>
						<div class="line"></div>
					</div>
				</div>
				<div id="sidebar" class="col-md-4">
					<!---- Start Widget ---->
					<div class="widget wid-follow">
						<div class="heading">
							<h4>
								<i class="fa fa-users"></i> Follow Us
							</h4>
						</div>
						<div class="content">
							<ul class="list-inline">
								<li><a href="facebook.com/">
										<div class="box-facebook">
											<span class="fa fa-facebook fa-2x icon"></span> <span>1250</span>
											<span>Fans</span>
										</div>
								</a></li>
								<li><a href="facebook.com/">
										<div class="box-twitter">
											<span class="fa fa-twitter fa-2x icon"></span> <span>1250</span>
											<span>Fans</span>
										</div>
								</a></li>
								<li><a href="facebook.com/">
										<div class="box-google">
											<span class="fa fa-google-plus fa-2x icon"></span> <span>1250</span>
											<span>Fans</span>
										</div>
								</a></li>
							</ul>
							<img src="../page/images/banner.jpg" />
						</div>
						<div class="line"></div>
					</div>
					<!---- Start Widget ---->
					<div class="widget wid-post">
						<div class="heading">
							<h4>
								<i class="fa fa-globe"></i> Category
							</h4>
						</div>
						<div class="content">
							<c:forEach items="${videoInfoTypeList}" var="videoInfoType"
								begin="0" end="3" step="1">
								<div class="post wrap-vid">
									<div class="zoom-container">
										<div class="zoom-caption">
											<c:forEach items="${videoTypeList}" var="videoType">
												<c:if test="${videoType.voTypeId == videoInfoType.vTypeId}">
													<span>${videoType.voTypeName}</span>
												</c:if>
											</c:forEach>
											<a
												href="../videoInfo/singleInitInfos?videoId=${videoInfoType.videoId}">
												<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
											</a>
											<p>${videoInfoType.videoName}</p>
										</div>
										<img src="${videoInfoType.videoCover}" />
									</div>
									<div class="wrapper">
										<h5 class="vid-name">
											<a
												href="../videoInfo/singleInitInfos?videoId=${videoInfoType.videoId}">${videoInfoType.videoName}</a>
										</h5>
										<div class="info">
											<h6>
												<c:forEach items="${videoTypeList}" var="videoType">
													<c:if test="${videoType.voTypeId == videoInfoType.vTypeId}">
															Type <a
															href="selectVideoTypeVideoInfo?vTypeId=${videoType.voTypeId}">${videoType.voTypeName}</a>
													</c:if>
												</c:forEach>
											</h6>
											<span><i class="fa fa-calendar"></i>${videoInfoType.createTime}</span>
											<span><i class="fa fa-heart"></i>${videoInfoType.loveNumber}</span>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div class="line"></div>
					</div>
					<!---- Start Widget ---->
					<!---- Start Widget ---->

				</div>
			</div>
		</div>

	</div>

	<footer>
	<div class="top-footer">
		<ul class="footer-social list-inline">
			<li><a href="#"><i class="fa fa-twitter"></i> <span>Twitter</span></a></li>
			<li><a href="#"><i class="fa fa-facebook"></i> <span>Facebook</span></a></li>
			<li><a href="#"><i class="fa fa-google-plus"></i> <span>Google+</span></a></li>
			<li><a href="#"><i class="fa fa-youtube"></i> <span>Video's
						Tag</span></a></li>
			<li><a href="#"><i class="fa fa-vimeo-square"></i> <span>Vimeo</span></a></li>
			<li><a href="#"><i class="fa fa-pinterest"></i> <span>Pinterest</span></a></li>
			<li><a href="#"><i class="fa fa-rss"></i> <span>Rss</span></a></li>
		</ul>
	</div>
	<div class="wrap-footer">
		<div class="container">
			<div class="row">
				<aside class="col-footer col-md-3">
				<h2 class="footer-title">About Us</h2>
				<div class="textwidget">
					Aenean feugiat in ante et blandit. Vestibulum posuere molestie
					risus, ac interdum magna porta non. Pellentesque rutrum fringilla
					elementum. Curabitur tincidunt porta lorem vitae accumsan. <br>
					<br> Aenean feugiat in ante et blandit. Vestibulum posuere
					molestie risus, ac interdum magna porta non. Pellentesque rutrum
					fringilla elementum. Curabitur tincidunt porta lorem vitae
					accumsan.
				</div>
				</aside>
				<aside class="col-footer col-md-3 widget_recent_entries">
				<h2 class="footer-title">Recent Posts</h2>
				<ul>
					<li><a href="#">MOST VISITED COUNTRIES</a></li>
					<li><a href="#">5 PLACES THAT MAKE A GREAT HOLIDAY</a></li>
					<li><a href="#">PEBBLE TIME STEEL IS ON TRACK TO SHIP IN
							JULY</a></li>
					<li><a href="#">STARTUP COMPANY&#8217;S CO-FOUNDER TALKS
							ON HIS NEW PRODUCT</a></li>
				</ul>
				</aside>
				<aside class="col-footer col-md-3">
				<h2 class="footer-title">NEWS LETTER</h2>
				If you want to receive our latest news send directly to your email,
				please leave your email address bellow. Subscription is free and you
				can cancel anytime.
				<form action="#" method="post">
					<input type="text" name="your-name" value="" size="40"
						placeholder="Your Email" /> <input type="submit"
						value="SUBSCRIBE" class="btn btn-3" />
				</form>
				</aside>
				<aside class="col-footer col-md-3 wptt_TwitterTweets">
				<h2 class="footer-title">Twitter</h2>
				<ul class="fetched_tweets light">
					<li class="tweets_avatar">
						<div class="tweet_wrap">
							<div class="wdtf-user-card ltr">
								<div class="clear"></div>
							</div>
							<div class="tweet_data">
								Check out 'NewsTube - Magazine Blog &amp; Video' on <a href="#"
									target="_blank" rel="nofollow">#EnvatoMarket</a> <a href="#"
									target="_blank" rel="nofollow">#themeforest</a>
							</div>
							<br />
							<div class="clear"></div>
							<div class="times">
								<em> <a href="#" target="_blank"
									title="Follow cactusthemes on Twitter [Opens new window]">
										2 months ago </a>
								</em>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</li>
					<li class="tweets_avatar">
						<div class="tweet_wrap">
							<div class="wdtf-user-card ltr">
								<div class="clear"></div>
							</div>
							<div class="tweet_data">
								Our latest theme 'Nano - Simple Magazine WordPress Theme' on <a
									href="#" target="_blank" rel="nofollow">#EnvatoMarket</a>
							</div>
							<br />
							<div class="clear"></div>
							<div class="times">
								<em> <a href="#" target="_blank"
									title="Follow cactusthemes on Twitter [Opens new window]">
										5 months ago </a>
								</em>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</li>
				</ul>
				</aside>
			</div>
		</div>
	</div>
	<div class="bottom-footer">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-sm-6 copyright">
					<span>Copyright &copy; 2015.Company name All rights
						reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
					</span>
				</div>
				<div class="col-md-6 col-sm-6 link">
					<div class="menu-footer-menu-container">
						<ul id="menu-footer-menu" class="menu list-inline">
							<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
							<li><a href="#"><i class="fa fa-comments"></i> Contact</a></li>
							<li><a href="#"><i class="fa fa-question-circle"></i>
									FAQ</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	</footer>
	<!-- Footer -->

	<!-- JS -->
	<script src="/page/owl-carousel/owl.carousel.js"></script>
	<script>
		$(document).ready(function() {
			$("#owl-demo").owlCarousel({
				autoPlay : 3000,
				items : 5,
				itemsDesktop : [ 1199, 4 ],
				itemsDesktopSmall : [ 979, 4 ]
			});

		});
	</script>

</body>
</html>